'use strict';
import React, {Component, PropTypes} from 'react';
import DiyBox from '../diy/Diy.jsx';
import SwiperBox from '../swiper/Swiper.jsx';
import BottomPic from './BottomPic.jsx';

class ComponentBox extends Component {
    constructor( props ) {
        super( props );
    }
    render() {
        let pageInfo = this.props.pageInfo;
        let deviceWidth = this.props.deviceWidth;
        let items = pageInfo.items;
        if(this.props.fromBackend){
            items = items.asMutable();
        }

        items.sort((a,b)=>{
            return a.order - b.order;
        });

        return (
            <span >
                {
                    items.map((row, i)=> {
                        if (row.type == 0 && row.status == 1)
                            return(
                                <DiyBox
                                    key={i}
                                    editDiyBtn={this.props.editDiyBtn}
                                    editMode={this.props.editMode}
                                    deviceWidth={deviceWidth}
                                    data={row}/>
                                );

                        if (row.type == 1 && row.status == 1)
                            return (
                                <SwiperBox
                                    key={i}
                                    editMode={this.props.editMode}
                                    editSwiper={this.props.editSwiper}
                                    deviceWidth={deviceWidth}
                                    data={row} />);

                        if (row.type == 2 && row.status == 1)
                            return (
                                <BottomPic
                                    key={i}
                                    data={row} />
                            );
                        return null
                    })
                }
            </span>
        );
    }
}


ComponentBox.propTypes = {
    deviceWidth:PropTypes.number.isRequired,
    pageInfo:PropTypes.object.isRequired,
};

export default ComponentBox;
